<template>
  <div class="setting-item robot-reply-setting">
    <div class="header">
      <div class="title">
        客服机器人自动回复设置
      </div>
      <div class="operates">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </div>
    </div>
    <div class="info">
      <p>
        请设置客服机器人自动回复
      </p>
    </div>
    <div class="content">
      <el-table :data="timeData" style="width: 100%" border>
        <el-table-column prop="date" label="关键词" width="180">
        </el-table-column>
        <el-table-column prop="times" label="回复话术"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="__setting-model"
      :visible="settingModelShow"
      title="新建机器人话术"
      @close="handleHideModel"
    >
      <div class="set-group">
        <div class="set-item">
          <label>关键词<span class="required">*</span>：</label>
          <textarea rows="3" maxlength="200" resize="none"></textarea>
        </div>
        <div class="set-item">
          <label>回复话术<span class="required">*</span>：</label>
          <div ref="replyEdit" class="reply" contenteditable="true"></div>
        </div>
        <div class="quote">
          <el-button type="primary" size="small" @click="handleShowDocument">
            引用知识库
          </el-button>
        </div>
      </div>
      <template #footer>
        <div class="footer">
          <el-button @click="handleHideModel">关闭</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <document-quote
      :visible.sync="documentReplyShow"
      @choose="handleChooseDocument"
    ></document-quote>
  </div>
</template>

<script>
import DocumentQuote from '@src/modules/repository/document/list/component/Quote.vue';

export default {
  components: {
    DocumentQuote,
  },
  data() {
    return {
      settingModelShow: false,
      timeData: [],
      currentDate: null,

      documentReplyShow: false, // 知识库弹窗
      listLoading: false,
    };
  },
  methods: {
    handleCreate() {
      this.settingModelShow = true;
    },
    /**
     * @des 编辑
     */
    handleEdit(data) {
      this.settingModelShow = true;
    },
    /**
     * 显示引用知识库
     */
    handleShowDocument() {
      this.documentReplyShow = true;
    },
    /**
     * 选中文档
     */
    handleChooseDocument(item) {
      const { id, handleTitle } = item;
      const tag = document.createElement('span');
      tag.setAttribute('data-document-id', id);
      tag.setAttribute('contenteditable', 'false');
      tag.classList.add('document-tag');
      tag.innerText = `<<${handleTitle}>>`;
      this.$refs.replyEdit.appendChild(tag);
      this.appendNoopEl(); // 后面插入一个空值
    },
    // 添加 空标签
    appendNoopEl() {
      const noop = document.createElement('span');
      this.$refs.replyEdit.appendChild(noop);
    },
    /**
     * @des 关闭 model
     */
    handleHideModel() {
      this.settingModelShow = false;
    },
    /**
     * 保存
     */
    handleSave() {
      const { replyEdit } = this.$refs;
      const html = replyEdit.innerHTML;

    },
    htmlEscape(html) {
      return String(html)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    },
  },
};
</script>

<style lang="scss">
.robot-reply-setting {
  .__setting-model {
    .set-group {
      position: relative;
      .set-item {
        display: flex;
        &:not(:last-of-type) {
          margin-bottom: 15px;
        }
        label {
          width: 80px;
          line-height: 40px;
        }
        textarea {
          flex: 1;
        }

        .reply {
          padding: 3px 10px;
          flex: 1;
          height: 80px;
          line-height: 24px;
          border: 1px solid #e0e1e2;
          overflow-y: auto;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          border-radius: 4px;

          &:focus {
            border-color: $color-primary;
            outline: none;
          }
          span {
            min-width: 0.1px;
            min-height: 0.1px;
          }
          .document-tag {
            position: relative;
            color: $color-primary;
          }
        }
      }
      .quote {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 15px 0;
      }
    }
    .footer {
      padding-top: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
